<template>
  <div>
    <el-dialog title="新增" v-model="visible" width="660px">
      <el-form ref="formRef" :model="formData" label-position="right" label-width="100px">
        <el-form-item label="任务名称" prop="taskName">
          <el-input v-model="formData.taskName"/>
        </el-form-item>
        <el-form-item label="开始时间" prop="answerRecordStartTime">
          <el-date-picker type="date" v-model="formData.answerRecordStartTime"
                          value-format="YYYY-MM-DD"

                          placeholder="开始时间" style="width: 200px;"/>
        </el-form-item>
        <el-form-item label="结束时间" prop="answerRecordEndTime">
          <el-date-picker type="date" v-model="formData.answerRecordEndTime"
                          value-format="YYYY-MM-DD"

                          placeholder="结束时间" style="width: 200px;"/>
        </el-form-item>
        <el-form-item label="备注" prop="taskMemo">
          <el-input v-model="formData.taskMemo"/>
        </el-form-item>
      </el-form>
      <template #footer>
          <span class="dialog-footer">
            <el-button @click="visible = false">取 消</el-button>
            <el-button type="primary" @click="commitHandle">确 定</el-button>
          </span>
      </template>

    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
const visible = ref(false)
const formRef = ref()
const formData = ref({})
const editFlag = ref(false)

import request from '@/config/axios'

const emit = defineEmits(["ok"])

const commitHandle = function () {
  if (editFlag.value) {
    editHandle()
  }else {
    saveHandle()
  }
}


const saveHandle = async function () {
  const response = await request.post({
    url: "/answerRecordTask/save",
    data: formData.value
  })
  visible.value = false
  ElMessage.success(response)
  emit("ok")
}

const editHandle = function () {
  visible.value = true
  request.post({
    url: "/answerRecordTask/updateById",
    data: formData.value
  }).then(res => {
    ElMessage.success("修改成功")
    emit("ok")
  }).finally(() => {
    visible.value = false
  })
}


defineExpose({
  add: (rowData) => {
    visible.value = true
    editFlag.value = false
  },
  edit: (rowData) => {
    visible.value = true
    formData.value = rowData
    editFlag.value = true
  }
})
</script>


<style scoped>

</style>
